@import './base.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 酒店管理系统自定义样式 */
@layer base {
  html {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }

  body {
    @apply bg-warm-50 text-gray-900;
  }
}

@layer components {
  /* 按钮组件样式 */
  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 shadow-warm;
  }

  .btn-secondary {
    @apply bg-warm-100 hover:bg-warm-200 text-warm-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200 border border-warm-300;
  }

  .btn-danger {
    @apply bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }

  /* 卡片组件样式 */
  .card {
    @apply bg-white rounded-xl shadow-warm-lg border border-warm-200 p-4 sm:p-5 lg:p-6 xl:p-6 2xl:p-8;
  }

  .card-header {
    @apply border-b border-warm-200 pb-4 mb-6;
  }

  /* 表单组件样式 */
  .form-input {
    @apply w-full px-3 py-2 border border-warm-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }

  .form-error {
    @apply text-red-500 text-sm mt-1;
  }

  /* 导航组件样式 */
  .nav-item {
    @apply flex items-center px-4 py-3 text-warm-700 hover:bg-warm-100 hover:text-primary-600 rounded-lg transition-all duration-200 cursor-pointer;
  }

  .nav-item.active {
    @apply bg-primary-50 text-primary-700 border-r-2 border-primary-500;
  }

  /* 表格组件样式 */
  .table {
    @apply w-full bg-white rounded-lg overflow-hidden shadow-warm;
  }

  .table-header {
    @apply bg-warm-50 border-b border-warm-200;
  }

  .table-row {
    @apply border-b border-warm-100 hover:bg-warm-25 transition-colors duration-150;
  }

  .table-cell {
    @apply px-3 sm:px-4 lg:px-5 xl:px-6 py-3 sm:py-4 text-sm text-gray-900;
  }

  .table-header-cell {
    @apply px-3 sm:px-4 lg:px-5 xl:px-6 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }
}

@layer utilities {
  /* 自定义工具类 */
  .text-gradient {
    @apply bg-gradient-to-r from-primary-500 to-accent-500 bg-clip-text text-transparent;
  }

  .bg-gradient-warm {
    @apply bg-gradient-to-br from-warm-400 via-primary-500 to-accent-500;
  }

  .shadow-warm-xl {
    box-shadow: 0 20px 25px -5px rgba(251, 146, 60, 0.1), 0 10px 10px -5px rgba(251, 146, 60, 0.04);
  }
}

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

/* PC端大屏幕布局优化 */
@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-gold-400 to-gold-600 bg-clip-text text-transparent;
  }

  /* 全宽布局工具类 */
  .full-width-container {
    @apply w-full max-w-none;
  }

  .minimal-padding {
    @apply px-2 sm:px-3 lg:px-4 xl:px-6;
  }

  .compact-spacing {
    @apply space-y-4 lg:space-y-6;
  }

  /* 3XL屏幕优化 (1920px+) */
  @media (min-width: 1920px) {
    .container-3xl {
      max-width: calc(100vw - 2rem);
      margin-left: auto;
      margin-right: auto;
    }

    .sidebar-3xl {
      width: 22rem;
    }

    .content-3xl {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  }

  /* 4XL屏幕优化 (2560px+) */
  @media (min-width: 2560px) {
    .container-4xl {
      max-width: calc(100vw - 4rem);
      margin-left: auto;
      margin-right: auto;
    }

    .sidebar-4xl {
      width: 24rem;
    }

    .content-4xl {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }
}
